<template>
  <div style=" height:600px; padding-bottom: 100px; background: #f6f7f9;">
    <!-- 顶部导航 -->
    <van-sticky>
      <van-nav-bar title="用户资料" left-arrow @click-left="$router.go(-1)">
      </van-nav-bar>
    </van-sticky>

    <van-cell-group class="panel">
      <van-cell title="头像" style="padding-top: 25px">
        <!-- 使用 right-icon 插槽来自定义右侧图标 -->
        <template #right-icon>
          <van-icon :name="userDetails.avatar" class="right-img" />
        </template>
      </van-cell>
      <van-cell title="昵称" :value="userDetails.nickname" @click="showNicknamePopup" style="margin-top: 3px" is-link/>
      <van-popup position="top" closeable v-model="show_nickname" style="text-align: center">
        <h3 style="text-align: center; padding: 15px;">修改昵称</h3>
        <van-form @submit="updateUserDetails()">
          <van-field
              v-model="userDetails.nickname"
              name="昵称"
              placeholder="昵称"
              style="background: #e5e5e7; border-radius: 15px;"
              :rules="[{ required: true, message: '请填写用户名' }]"
          />
          <div style="margin: 16px;">
            <van-button round block type="info" native-type="submit">提交</van-button>
          </div>
        </van-form>
      </van-popup>
      <van-cell title="性别" :value="userDetails.sex" @click="showSexPopup" style="margin-top: 3px" is-link/>
      <van-popup position="top" closeable v-model="show_sex" style="text-align: center;">
        <van-form @submit="updateUserDetails()">
          <h3 style="text-align: center; padding: 15px;">修改性别</h3>
          <van-field name="radio">
            <template #input>
              <van-radio-group v-model="userDetails.sex" direction="horizontal">
                <van-radio name="男">男</van-radio>
                <van-radio name="女">女</van-radio>
              </van-radio-group>
            </template>
          </van-field>
          <div style="margin: 16px;">
            <van-button round block type="info" native-type="submit">提交</van-button>
          </div>
        </van-form>
      </van-popup>
      <van-cell title="实名" :value="userDetails.name" @click="showNamePopup" style="margin-top: 3px" is-link/>
      <van-popup position="top" closeable v-model="show_name">
        <h3 style="text-align: center; padding: 15px;">修改实名</h3>
        <van-form @submit="updateUserDetails()">
          <van-field
              v-model="userDetails.name"
              name="实名"
              placeholder="实名"
              style="background: #e5e5e7; border-radius: 15px;"
              :rules="[{ required: true, message: '请填写实名' }]"
          />
          <div style="margin: 16px;">
            <van-button round block type="info" native-type="submit">提交</van-button>
          </div>
        </van-form>
      </van-popup>
      <van-cell title="手机号" :value="userDetails.phone" @click="showPhonePopup" style="margin-top: 3px" is-link/>
      <van-popup position="top" closeable v-model="show_phone">
        <h3 style="text-align: center; padding: 15px;">修改手机号</h3>
        <van-form @submit="updateUserDetails()">
          <van-field
              v-model="userDetails.phone"
              name="手机"
              placeholder="手机"
              style="background: #e5e5e7; border-radius: 15px;"
              :rules="[{ required: true, message: '请填写手机号' }]"
          />
          <div style="margin: 16px;">
            <van-button round block type="info" native-type="submit">提交</van-button>
          </div>
        </van-form>
      </van-popup>
      <van-cell title="密码" value="修改密码" value-class="password" @click="showPasswordPopup" style="margin-top: 3px" is-link/>
      <van-popup position="top" closeable v-model="show_password">
        <h3 style="text-align: center; padding: 15px;">修改密码</h3>
        <van-form @submit="updateUserDetails">
          <van-field
              v-model="userDetails.prePassword"
              type="password"
              name="原始密码"
              label="原始密码"
              placeholder="首次设置请留空"
          />
          <van-field
              v-model="userDetails.password"
              type="password"
              name="新设密码"
              label="新设密码"
              placeholder="密码"
          />
          <van-field
              v-model="userDetails.ackPassword"
              type="password"
              name="重复密码"
              label="重复密码"
              placeholder="请再次密码"
              :rules="[
          { required: true, message: '请再次输入密码' },
          {
            validator: () => {
              return userDetails.password == userDetails.ackPassword;
            },
            message: '重复密码需要与密码输入一致',
          },
        ]"
          />
          <div style="margin: 16px">
            <van-button round block type="info" native-type="submit"
            >提交修改</van-button
            >
          </div>
        </van-form>
      </van-popup>
    </van-cell-group>

    <van-button @click="updateAllInfo" round type="info" style="width: 300px; margin-top: 30px">完成</van-button>
  </div>
</template>

<script>
export default {
  name: "UserDetails",
  data() {
    return {
      userDetails:{
        avatar: '',
        nickname: '',
        name: '',
        sex: '',
        phone: '',
        prePassword:'',
        password:'',
        ackPassword:'',
      },
      show_nickname:false,
      show_sex:false,
      show_name:false,
      show_phone:false,
      show_password:false,
    }
  },
  methods: {
    updateAllInfo(){
      this.updateUserDetails();
      this.$router.replace("/home/platform");
    },
    getUserDetails() {
      console.log('在localStorage中的JWT数据：' + localStorage.getItem('jwt'));
      let url = 'http://localhost:9080/users/login-details';
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .get(url).then((response) => {
        console.log(response.data.data);
        let userDetails = response.data.data;
        if(userDetails.sex==0){
          userDetails.sex='女'
        }else {
          userDetails.sex='男'
        }
        this.userDetails=userDetails;
      })
    },
    showNicknamePopup(){
      this.show_nickname=true;
    },
    showSexPopup(){
      this.show_sex=true;
    },
    showNamePopup(){
      this.show_name=true;
    },
    showPhonePopup(){
      this.show_phone=true;
    },
    showPasswordPopup(){
      this.show_password=true;
    },
    showSchoolPopup(){
      this.show_school=true;
    },
    showClassnamePopup(){
      this.show_classname=true;
    },
    showSnoPopup(){
      this.show_sno=true;
    },

    updateUserDetails(){
      let url = 'http://localhost:9080/users/login-update';
      if(this.userDetails.sex=='男'){
        this.userDetails.sex=1;
      }else {
        this.userDetails.sex=0;
      }
      let formInfo = this.qs.stringify(this.userDetails, {arrayFormat: 'repeat'});
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .post(url, formInfo).then((response) => {
        let responseBody = response.data;
        console.log(responseBody);
        if (responseBody.state == 20000) {
          this.$toast.success('修改成功!');
          this.getUserDetails();
        }else{
          this.$toast.fail(responseBody.message);
        }
      });
    }
  },
  mounted() {
    this.getUserDetails();
  }
}
</script>

<style scoped>

.panel {
  padding: 5px;
  margin-top: 5px;
  text-align: left;
  background: #f6f7f9;
}
.right-img {
  font-size: 40px;
  line-height: inherit;
}
.password{
  color: #42b983;
}
</style>
